    var gesturableImg = null;

    $(document).on('pageinit', '#page2', function () {
        // code 
        var _menuLoaded = false;
        $('#mypanel').load('menu.html', function () {
            crealeList();
            $(this).trigger("updatelayout");
            $.mobile.loading("hide");
            _menuLoaded = true;
        });
    });
    
    
    $(document).on('pagebeforeshow', '#page2', function(){ 
        $(document).on("popupbeforeposition", "#popup1",function( event, ui ) {
            crealeList();
        });  
    });
    
    $(document).ready(function(){
        
        
        var img=getParam("img");
        gotozoom(img);
         
    });
    
    function gotozoom(img){
        gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: img,
            desktop: true,
        });
        
    }
    
    function optionsHash(){
        crealeList();
        $("#mypanel").trigger("updatelayout");
    }
    
    function qwe(){ 
        //window.location = setParam("img", "http://anibox.me/manga/edo-mertvetsov/edo-mertvetsov-1-1-122026/000.png_res.jpg");
        //gesturableImg.simplyFunc();
/*        gesturableImg.destroyImg();
        gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: "http://anibox.me/manga/tjomnij-mag/tjomnij-mag-1-0-fantazija-o-drugoj-zemle-85465/edark_mage_v1_ch00_p007.png_res.jpg",
            desktop: true,
        });*/
        
        
/*        var canvas = document.getElementById('mycanvas');
        
        var cs = new CanvasSaver('http://greenethumb.com/canvas/lib/saveme.php');
        cs.savePNG(canvas, 'image');

        function CanvasSaver(url) {
          this.url = url;
          this.savePNG = function(cnvs, fname) {
              console.log("savePng");
          if(!cnvs || !url) return;
            fname = fname || 'picture';

            var data = cnvs.toDataURL("image/jpeg");
            data = data.substr(data.indexOf(',') + 1).toString();
            var dataInput = document.createElement("input") ;
            dataInput.setAttribute("name", 'imgdata') ;
            dataInput.setAttribute("value", data);

            var nameInput = document.createElement("input") ;
            nameInput.setAttribute("name", 'name') ;
            nameInput.setAttribute("value", fname + '.jpeg');

            var myForm = document.createElement("form");
            myForm.method = 'post';
            myForm.action = url;
            myForm.appendChild(dataInput);
            myForm.appendChild(nameInput);

            document.body.appendChild(myForm) ;
            myForm.submit() ;
            document.body.removeChild(myForm) ;
          };
          }
          */
        
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);
        
    }
     
    function fileSystemSuccess(fileSystem) {
        
        var states = {};
        states[FileTransferError.FILE_NOT_FOUND_ERR] = 'FILE_NOT_FOUND_ERR';
        states[FileTransferError.INVALID_URL_ERR]    = 'INVALID_URL_ERR';
        states[FileTransferError.CONNECTION_ERR]     = 'CONNECTION_ERR';
        states[FileTransferError.ABORT_ERR]          = 'ABORT_ERR';
        
        var folderName = 'anibox';
        var directoryEntry = fileSystem.root; // to get root path to directory
        directoryEntry.getDirectory(folderName, {create: true, exclusive: false}, onDirectorySuccess, onDirectoryFail);
        var rootdir = fileSystem.root;
        var fp = rootdir.fullPath;
        fp = fp+"/"+folderName+"/image_name.png";
        var fileTransfer = new FileTransfer();
       fileTransfer.download("http://anibox.me/manga/gejmer/gejmer-1-24-122194/1.jpg",fp,  
            function(entry) {
                alert("download complete: " + entry.fullPath);
            },
            function(error) {
                alert("download error source " + error.source);
                alert("download error target " + error.target);
                alert("upload error code" + error.code);
            }
        );
    }
    function onDirectorySuccess(parent) {
        console.log(parent);
    }
     
    function onDirectoryFail(error) {
        alert("Unable to create new directory: " + error.code);
    }
     
    function fileSystemFail(evt) {
        console.log(evt.target.error.code);
    }
    
    
    function qwet(){
        window.location = setParam("img", "http://anibox.me/manga/gejmer/gejmer-1-24-122194/1.jpg");
    }
    
    function pages(){
        var el = document.createElement("iframe");
        el.style.width = "300px";
        el.style.height = "500px";
        el.src="2.html";
        //el.addEventListener("load",crealeList,false);
        document.body.appendChild(el);
    }
    
    function crealeList(){
        $('#list').empty();
        var ul = document.createElement("ul");
        ul.id="list";
        for(var i=0; i<40; i++){
            $('#list').append(
                      '<li onClick="but(this.id);" id="'+i+'">'+i+'</li>\n'            
            );
        }
        $('#list').listview('refresh');
    }
    
    function but(id){
        $( '#mypanel' ).panel( "close" );
        alert(id);
    }
    
    function getParam(sParamName){
        var Params = location.search.substring(1).split("&"); // Ã�Â¾Ã‘â€šÃ‘ï¿½Ã�ÂµÃ�ÂºÃ�Â°Ã�ÂµÃ�Â¼ Ã‚Â«?Ã‚Â» Ã�Â¸ Ã�Â²Ã�Â½Ã�Â¾Ã‘ï¿½Ã�Â¸Ã�Â¼ Ã�Â¿Ã�ÂµÃ‘â‚¬Ã�ÂµÃ�Â¼Ã�ÂµÃ�Â½Ã�Â½Ã‘â€¹Ã�Âµ Ã�Â¸ Ã�Â¸Ã‘â€¦ Ã�Â·Ã�Â½Ã�Â°Ã‘â€¡Ã�ÂµÃ�Â½Ã�Â¸Ã‘ï¿½ Ã�Â² Ã�Â¼Ã�Â°Ã‘ï¿½Ã‘ï¿½Ã�Â¸Ã�Â²
        var variable = "";
        for (var i = 0; i < Params.length; i++){ // Ã�Â¿Ã‘â‚¬Ã�Â¾Ã�Â±Ã�ÂµÃ�Â³Ã�Â°Ã�ÂµÃ�Â¼ Ã�Â²Ã�ÂµÃ‘ï¿½Ã‘Å’ Ã�Â¼Ã�Â°Ã‘ï¿½Ã‘ï¿½Ã�Â¸Ã�Â²
            if (Params[i].split("=")[0] == sParamName){ // Ã�ÂµÃ‘ï¿½Ã�Â»Ã�Â¸ Ã‘ï¿½Ã‘â€šÃ�Â¾ Ã�Â¸Ã‘ï¿½Ã�ÂºÃ�Â¾Ã�Â¼Ã�Â°Ã‘ï¿½ Ã�Â¿Ã�ÂµÃ‘â‚¬Ã�ÂµÃ�Â¼Ã�ÂµÃ�Â½Ã�Â½Ã�Â°Ã‘ï¿½ Ã¢â‚¬â€� Ã�Â±Ã�Â¸Ã�Â½Ã�Â³Ã�Â¾!
                if (Params[i].split("=").length > 1) variable = Params[i].split("=")[1]; // Ã�ÂµÃ‘ï¿½Ã�Â»Ã�Â¸ Ã�Â·Ã�Â½Ã�Â°Ã‘â€¡Ã�ÂµÃ�Â½Ã�Â¸Ã�Âµ Ã�Â¿Ã�Â°Ã‘â‚¬Ã�Â°Ã�Â¼Ã�ÂµÃ‘â€šÃ‘â‚¬Ã�Â° Ã�Â·Ã�Â°Ã�Â´Ã�Â°Ã�Â½Ã�Â¾, Ã‘â€šÃ�Â¾ Ã�Â²Ã�Â¾Ã�Â·Ã�Â²Ã‘â‚¬Ã�Â°Ã‘â€°Ã�Â°Ã�ÂµÃ�Â¼ Ã�ÂµÃ�Â³Ã�Â¾
                return variable;
            }
        }
        return "";
    }

    function setParam(sParamName, sParamValue){
        var Params = location.search.substring(1).split("&"); // Ã�Â¾Ã‘â€šÃ‘ï¿½Ã�ÂµÃ�ÂºÃ�Â°Ã�ÂµÃ�Â¼ Ã‚Â«?Ã‚Â» Ã�Â¸ Ã�Â²Ã�Â½Ã�Â¾Ã‘ï¿½Ã�Â¸Ã�Â¼ Ã�Â¿Ã�ÂµÃ‘â‚¬Ã�ÂµÃ�Â¼Ã�ÂµÃ�Â½Ã�Â½Ã‘â€¹Ã�Âµ Ã�Â¸ Ã�Â¸Ã‘â€¦ Ã�Â·Ã�Â½Ã�Â°Ã‘â€¡Ã�ÂµÃ�Â½Ã�Â¸Ã‘ï¿½ Ã�Â² Ã�Â¼Ã�Â°Ã‘ï¿½Ã‘ï¿½Ã�Â¸Ã�Â²
        var variable = location.href.slice(0,window.location.href.indexOf('\?'));
        for (var i = 0; i < Params.length; i++){ // Ã�Â¿Ã‘â‚¬Ã�Â¾Ã�Â±Ã�ÂµÃ�Â³Ã�Â°Ã�ÂµÃ�Â¼ Ã�Â²Ã�ÂµÃ‘ï¿½Ã‘Å’ Ã�Â¼Ã�Â°Ã‘ï¿½Ã‘ï¿½Ã�Â¸Ã�Â²
            if (Params[i].split("=")[0] == sParamName){ // Ã�ÂµÃ‘ï¿½Ã�Â»Ã�Â¸ Ã‘ï¿½Ã‘â€šÃ�Â¾ Ã�Â¸Ã‘ï¿½Ã�ÂºÃ�Â¾Ã�Â¼Ã�Â°Ã‘ï¿½ Ã�Â¿Ã�ÂµÃ‘â‚¬Ã�ÂµÃ�Â¼Ã�ÂµÃ�Â½Ã�Â½Ã�Â°Ã‘ï¿½ Ã¢â‚¬â€� Ã�Â±Ã�Â¸Ã�Â½Ã�Â³Ã�Â¾!
                var buf = Params[i].split("=")[0];
                buf = buf + "=" + sParamValue;
                Params[i] = buf;
            }
            if(i == 0){
                variable = variable + "?" + Params[i];
            }else{
                variable = variable + "&" + Params[i];
            }
        }
        return variable;
    }

//cheak load cordova
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        //don't work
        //document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
        //$.mobile.loading('show');
        //document.addEventListener("backbutton", onBackKeyDown, false);
    }
    
    function onBackKeyDown() {
        window.location = "file:///android_asset/www/index.html";
    }
    
    function alertDismissed() {
        // do something
    }
    
    var db
    function butClickPage2(){
        db = window.openDatabase("test", "1.0", "Test DB", 1000000);
        db.transaction(populateDB1, errorCB, successCB);
    }
    
    function butClickPage3(){
        db = window.openDatabase("test", "1.0", "Test DB", 1000000);
        db.transaction(populateDB2, errorCB, successCB);
    }
    
    function populateDB1(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS DEMOS (id unique, data)');
        tx.executeSql('INSERT INTO DEMOS (id, data) VALUES (1, "First row")');
    }
    
    function populateDB2(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS DEMOS (id unique, data)');
        tx.executeSql('INSERT INTO DEMOS (id, data) VALUES (2, "Second row")');
    }

    // Transaction error callback
    //
    function errorCB(tx, err) {
        alert("Error processing SQL: "+err);
    }

    // Transaction success callback
    //
    function successCB() {
        console.log("success!");
    }
    
    function butClickPage1(){
        db = window.openDatabase("test", "1.0", "Test DB", 1000000);
        db.transaction(queryDB, errorCB);
    }
    
    function errorCB(err) {
        console.log("Error processing SQL: "+err.code);
    }
    
    function queryDB(tx) {
        tx.executeSql('SELECT * FROM DEMOS', [], querySuccess, errorCB);
    }

    // Query the success callback
    //
    function querySuccess(tx, results) {
        console.log("Returned rows = " + results.rows.length);
        alert(results.rows.length);
        // this will be true since it was a select statement and so rowsAffected was 0
        if (!results.rowsAffected) {
            console.log('No rows affected!');
            return false;
        }
        // for an insert statement, this property will return the ID of the last inserted row
    }
    
    //zoom image
    /*function Zoom(z){
        var w = document.getElementById('img_1').width;
        var h = document.getElementById('img_1').height;
        
        document.getElementById('img_1').width=w+z;
        document.getElementById('img_1').height=h+z+3;
    }
    
    //unzoom image
    function unZoom(z){
        var w = document.getElementById('img_1').width;
        var h = document.getElementById('img_1').height;
        
        document.getElementById('img_1').width=w-z;
        document.getElementById('img_1').height=h-z-3;
    }
                
    //next image 
    function press(id){
        if (document.getElementById(id).src.indexOf("1.jpg")>0){
            document.getElementById(id).src="3.jpg";
            //document.getElementById(id).width="100%";
        }else{
            document.getElementById(id).src="1.jpg";
            //document.getElementById(id).width="100%";
        }
    }*/

//swipe, work
/*    $(function(){
      // Bind the swipeHandler callback function to the swipe event on div.box
      $( "#my_div" ).on( "swiperight", swipeRight );
      $( "#my_div" ).on( "swipeleft", swipeLeft );
     
      // Callback function references the event target and adds the 'swipe' class to it
      function swipeRight( event ){
        //alert(event+" "+event.type+" "+event.target);
        document.getElementById("img_1").src="3.jpg";
      }
      
      function swipeLeft( event ){
        widthClient=document.body.clientWidth; // ÑˆÐ¸Ñ€Ð¸Ð½Ð°  
        //alert(event.pageX);
        document.getElementById("img_1").src="2.jpg";
      }
      
    });
*/    
        
        //pinch work
        /*$(function() {            
            $("#options").swipe( {
                pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom)
                {
                    Zoom(30);
                },
                pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom)
                {
                    unZoom(30);
                },                      
                fingers:2,  
                pinchThreshold:0    
            });
        });*/
        
        